<template>
  <div>
    <h3>点单页面</h3>

    <el-tag
      v-for="(item, i) in Mersheinfo"
      :key="i"
      @click="MersheList(item.id)"
    >
      {{ item.username }}
    </el-tag>
    <el-button @click="mertantmid">点击与商家聊天</el-button>
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    <el-tag
      v-for="(item, i) in editableTabs"
      :key="i"
      @click="handleTabsEdit(item.id)"
    >
      {{ item.dishes_class_name }}
    </el-tag>
    &emsp;&emsp;&emsp;&emsp;<a href="/address">管理收货地址</a>
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;用户:<a
      href="/userinfo"
      ><el-avatar :src="ints.portrait_img"></el-avatar></a
    >&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    <a href="/order_from">点击查询我的订单</a>
    <div class="el-icon">
      <a href="/shopp"><i class="el-icon-shopping-cart-2"></i></a>
    </div>
    <el-table :data="tableData" height="500" border style="width: 100%">
      <el-table-column label="图片展示" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.dishes_img"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="dishes_name"
        label="菜品名称"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="dishes_price" label="菜品价格" align="center">
      </el-table-column>
      <el-table-column prop="" label="操作" align="center">
        <template #default="scope">
          <!-- <el-button type="primary" @click="upd(scope.row.id)">修改</el-button> -->
          <el-button type="primary" @click="shopp(scope.row.id)"
            >加入购物车</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-dialog title="菜品管理" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item label="菜品名字">
            <el-input
              v-model="cai_list.dishes_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="菜品价格">
            <el-input
              v-model="cai_list.dishes_price"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Axios from "axios";
import { reactive } from 'vue';
export default {
  name: "",
  data() {
    return {
      tableData: [],
      editableTabs: [],
      did: [],
      dialogFormVisible: false,
      cai_list: {
        id: 0,
        dishes_name: "",
        dishes_price: "",
      },
      Mersheinfo:[],
      ints: [],
      uid: "",
      mer_name:'',
      mid:'',
      por_img:'',
      mer_img:'',
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    // 获取当前登录的用户
    Axios.get("http://127.0.0.1:8000/user/infolist/", {
      headers: { token: localStorage.getItem("token") || "" },
    }).then((res) => {
      this.uid = res.data.userinfo.id;
      this.por_img = res.data.userinfo.portrait_img
      console.log("获取登录用户的信息>>", res);
      this.ints = res.data.userinfo;
    });
    // 获取所有的菜
    Axios.get("http://127.0.0.1:8000/user/dishesinfo/").then((res) => {
      console.log("获取所有的菜>>", res);
      this.tableData = res.data;
    });
    // 获取所有的商家
    Axios.get("http://127.0.0.1:8000/user/mersheinfo/").then((res) => {
      console.log("获取所有商家>>", res);
      this.Mersheinfo = res.data.data;
    });
  },

  methods: {
    // 点击菜品获取菜品下的菜
    handleTabsEdit(id) {
      Axios.get("http://127.0.0.1:8000/user/dishes/" + id + "/").then((res) => {
        console.log("获取菜品分类下的菜>>", res);
        this.tableData = res.data.data;
      });
    },
    // 获取要修改的菜
    upd(id) {
      this.dialogFormVisible = true;
      Axios.get("http://127.0.0.1:8000/user/dishesinfo/" + id + "/").then(
        (res) => {
          console.log("获取指定菜品>", res);
          this.cai_list = res.data;
        }
      );
    },
    // 加入购物车
    shopp(id) {
      Axios.post("http://127.0.0.1:8000/customer/shopp/", {
        uid: this.uid,
        id: id,
      }).then((res) => {
        console.log("加入购物车的响应>", res);
        if (res.data.code == 200) {
          this.$notify({
            title: "成功",
            message: "加入购物车成功",
            type: "success",
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.msg,
          });
        }
      });
    },
    // 获取商家下的菜品
    MersheList(id) {
      // 获取当前商家的菜品分类
      Axios.get("http://127.0.0.1:8000/user/disclas/",{
        params:{cid:id},
      }).then((res) => {
        console.log("获取菜品分类>>", res);
        this.editableTabs = res.data.data;
        this.mer_name = res.data.data[0].mer_name
        this.mer_img = res.data.mer_img
      });
      console.log("商家id》》》",id)
      this.mid = id
    },
    mertantmid(){
      console.log("111123", this.mid)
      console.log("uid", this.uid)
      console.log("mer_name", this.mer_name)
      this.$router.push({path:"/index",query:{mid: this.mid,uid:this.uid,
      mer_name:this.mer_name,por_img:this.por_img,
      mer_img:this.mer_img}})
    }
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style>
* {
  margin: 0;
}
.el-icon {
  font-size: 40px;
  float: right;
}
</style>
